<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="JavaScript">
<!--
	var data2 = <? echo file_get_contents('http://localhost/cubes/menu/load_json'); ?>

	var data3 = {
		'info' : data2.columns,
		'children':data2.items
	};
//-->
</script>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>jQuery treeView</title>
	
	<link rel="stylesheet" href="jquery.treeview.css" />
    <link rel="stylesheet" href="red-treeview.css" />
	<link rel="stylesheet" href="screen.css" />
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.cookie.js" type="text/javascript"></script>
	<script src="jquery.treeview.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#gray").treeview({
			control: "#treecontrol",
			persist: "cookie"
		});
	});
	</script>
	<style type="text/css">
	  	#gray.treeview li { background: url(images/gray/tv-item.gif) 0 0 no-repeat; }
	  	#gray.treeview .collapsable { background-image: url(images/gray/tv-collapsable.gif); }
	  	#gray.treeview .expandable { background-image: url(images/gray/tv-expandable.gif); }
	  	#gray.treeview .last { background-image: url(images/gray/tv-item-last.gif); }
	  	#gray.treeview .lastCollapsable { background-image: url(images/gray/tv-collapsable-last.gif); }
	  	#gray.treeview .lastExpandable { background-image: url(images/gray/tv-expandable-last.gif); }
	</style>



<script language="JavaScript">
<!--
	var isChecked = "";
	function viewCheckTreeRec(obj) {
		if ( obj.is('li') ) obj.children().find('input').filter(':first').attr("checked", isChecked ? "checked" : "");
		if ( obj.attr('id') == 'gray' ) return;
		viewCheckTreeRec($(obj).parent());
	}
/*	function viewCheckTree(obj, id ) {
		isChecked = $(obj).attr("checked") ? true : false;
		user_function ( id, isChecked );
		if ( isChecked ) {
			if ( $(obj).parent().is('span') ) 
				$(obj).parent().parent().children().find('input').attr("checked", "checked");
			viewCheckTreeRec( $(obj).parent() );
		}
	}*/

	function viewCheckTree(obj, id ) {
		isChecked = $(obj).attr("checked") ? true : false;
  user_function ( id, isChecked );
  if ( isChecked ) {
   if ( $(obj).parent().is('span') ) 
    $(obj).parent().parent().children().find('input').attr("checked", "checked");
   viewCheckTreeRec( $(obj).parent() );
  } else if ( $(obj).parent().is('span') ) 
   $(obj).parent().parent().children().find('input').attr("checked", "");
 }

	function uncheckAll() {
		$("#gray").children().find('input').attr("checked", "");
	}
	function checkAll() {
		$("#gray").children().find('input').attr("checked", "checked");
	}

	function create_branch ( hash ) {
		var line = '';
		if ( hash['children'] && typeof hash['children'] == 'object' && hash['children'] instanceof Array ) {
			line += '<li><span><input id="tree_checkbox_'+ hash['id'] +'" type="checkbox" onClick="viewCheckTree(this, '+ hash['id'] +');">'+ hash['info'][0] +'</span><ul style="display:none;">';
			for (var i = 0; i < hash['children'].length; i++ ) line += create_branch ( hash['children'][i] );
			line += '</li></ul>';
		} else if ( hash && typeof hash == 'object')
			line += '<li><input id="tree_checkbox_'+ hash['id'] +'" type="checkbox" onClick="viewCheckTree(this,'+ hash['id'] +');">'+ hash['info'][0] +'</li>';
		/* for test  */
//		else alert('error list: '+ hash );
		return line;
	}

	function create_tree ( hash ) {
		var line = '<ul id="gray">';
		line += create_branch ( hash );
		line += '</ul>';
		return line;
	}

	function user_function ( id, type ) {
//		if ( type ) alert('select '+ id );
//		else alert('uNselect '+ id );
	}

//-->
</script>



</head>
<body>
	
<div id="main">
	<h4>Sample 3 - two trees with one tree control, black and gray image set, with cookie-based state-saving</h4>
	<div id="treecontrol">
		<a href="#">Collapse All</a>
		<a href="#">Expand All</a>
		<a href="#">Toggle All</a>
	</div>
	<div>
		<a href="#" onClick="uncheckAll();">unSelect All</a>
		<a href="#" onClick="checkAll();">Select All</a>
	</div>
<script language="JavaScript">
<!--
	document.write(create_tree ( data3 ));
//-->
</script>
</div>
 
</body></html>
